<template>
  <div class="body">
    <router-link style="margin-left: 24px" :to="{ path: '/courseSelect/index' }"
      ><a-button>选课管理</a-button></router-link
    >
    <router-link :to="{ path: '/courseSelect/achievement' }"
      ><a-button>成绩管理</a-button></router-link
    >
    <router-link :to="{ path: '/courseSelect/attendance' }"
      ><a-button>考勤管理</a-button></router-link
    >
    <router-link :to="{ path: '/courseSelect/course' }"
      ><a-button>我的课程</a-button></router-link
    >

    <a-tabs default-active-key="1" @change="setTimeCondition">
      <a-tab-pane key="1" tab="日统计">
        <div class="day-statistics">
          <div class="day-form">
            <div class="form-item">
              <div class="day-form-tit">选择日期：</div>
              <a-date-picker v-model="searchData.queryDate" class="day-form-in"/>
            </div>
            <div class="form-item">
              <div class="day-form-tit">考勤组：</div>
              <a-select default-value="请选择考勤组" v-model="searchData.groupId" class="day-form-in">
                <a-select-option v-for="(item, index) in groupArr" :key="index" :value="item.id">
                  {{ item.groupName || '' }}
                </a-select-option>
              </a-select>
            </div>
            <div class="form-item">
              <div class="day-form-tit">部门：{{ searchData.deptId }}</div>
              <a-cascader
                  :field-names="{ label: 'name', value: 'id', children: 'child' }"
                  :options="deptArr"
                  v-model="searchData.deptId"
                  placeholder="请选择"
                  class="day-form-in"/>
            </div>
            <div class="form-item">
              <div class="day-form-tit">考勤状态：</div>
              <a-select v-model="searchData.timesType" placeholder="请选择考勤状态" default-value="迟到" class="day-form-in">
                <a-select-option v-for="(item, index) in timesTypeArr" :key="index" :value="item.value">
                  {{ item.title }}
                </a-select-option>
              </a-select>
            </div>
            <div class="form-item">
              <div class="day-form-tit">教师姓名：</div>
              <a-input v-model="searchData.userName" placeholder="请输入教师姓名" class="day-form-in"  />
            </div>
            <div style="margin-left: 50px;">
              <a-button class="day-form-btn" type="primary" @click="getList()">搜索</a-button>
              <a-button class="day-form-btn" @click="reset">重置</a-button>
            </div>
          </div>
          <a-table :columns="columns" :data-source="list" class="table">
            <span slot="work_s_1" slot-scope="work_s_1" :class="[getTxtColor(work_s_1)]">{{ work_s_1 }}</span>
            <span slot="work_x_1" slot-scope="work_x_1" :class="[getTxtColor(work_x_1)]">{{ work_x_1 }}</span>
            <span slot="work_s_2" slot-scope="work_s_2" :class="[getTxtColor(work_s_2)]">{{ work_s_2 }}</span>
            <span slot="work_x_2" slot-scope="work_x_2" :class="[getTxtColor(work_x_2)]">{{ work_x_2 }}</span>
            <span slot="work_s_3" slot-scope="work_s_3" :class="[getTxtColor(work_s_3)]">{{ work_s_3 }}</span>
            <span slot="work_x_3" slot-scope="work_x_3" :class="[getTxtColor(work_x_3)]">{{ work_x_3 }}</span>
          </a-table>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="周统计" force-render>
        <div class="day-statistics">
          <div class="day-form">
            <div class="form-item">
              <div class="day-form-tit">选择周期：</div>
              <a-week-picker placeholder="选择周" v-model="searchData.queryDate" />
            </div>
            <div class="form-item">
              <div class="day-form-tit">考勤组：</div>
              <a-select default-value="请选择考勤组" v-model="searchData.groupId" class="day-form-in">
                <a-select-option v-for="(item, index) in groupArr" :key="index" :value="item.id">
                  {{ item.groupName || '' }}
                </a-select-option>
              </a-select>
            </div>
            <div class="form-item">
              <div class="day-form-tit">部门：</div>
              <a-cascader
                :field-names="{ label: 'name', value: 'id', children: 'child' }"
                :options="deptArr"
                v-model="searchData.deptId"
                placeholder="请选择"
                class="day-form-in"
              />
            </div>
            <div class="form-item">
              <div class="day-form-tit">教师姓名：</div>
              <a-input v-model="searchData.userName" placeholder="请输入教师姓名" class="day-form-in"  />
            </div>
            <div style="margin-left: 50px;">
              <a-button class="day-form-btn" type="primary" @click="getList()">搜索</a-button>
              <a-button class="day-form-btn" @click="reset">重置</a-button>
            </div>
          </div>
          <a-table :columns="columns" :data-source="list" class="table"></a-table>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="月统计">
        <div class="day-statistics">
          <div class="day-form" style="margin-bottom: 20px;">
            <div class="form-item">
              <div class="day-form-tit">选择月份：</div>
              <a-month-picker placeholder="选择月" />
            </div>
            <div class="form-item">
              <div class="day-form-tit">考勤组：{{ searchData.groupId }}</div>
              <a-select default-value="请选择考勤组" v-model="searchData.groupId" class="day-form-in">
                <a-select-option v-for="(item, index) in groupArr" :key="index" :value="item.id">
                  {{ item.groupName || '' }}
                </a-select-option>
              </a-select>
            </div>
            <div class="form-item">
              <div class="day-form-tit">部门：</div>
              <a-cascader
                :field-names="{ label: 'name', value: 'id', children: 'child' }"
                :options="deptArr"
                v-model="searchData.deptId"
                placeholder="请选择"
                class="day-form-in" />
            </div>
            <div class="form-item">
              <div class="day-form-tit">教师姓名：</div>
              <a-input v-model="searchData.userName" placeholder="请输入教师姓名" class="day-form-in"  />
            </div>
            <div style="margin-left: 50px;">
              <a-button class="day-form-btn" type="primary" @click="getList()">搜索</a-button>
              <a-button class="day-form-btn" @click="reset">重置</a-button>
            </div>
          </div>
          <a-table :columns="columns" :data-source="list"></a-table>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<style scoped="scoped" lang="scss">
  .red {
    color: red;
  }

  .yellow {
    color: #FF8948;
  }

  .body {
    padding: 24px 0;
  }
  ::v-deep .ant-tabs-nav-container {
    margin-left: 24px;
  }
  .day-statistics {
    margin: 0 24px;
    .day-form {
      display: flex;
      flex-wrap: wrap;
      .day-form-tit {
        white-space: nowrap;
      }
      .form-item {
        display: flex;
        align-items: center;
        // margin: 0 0 24px 0;
        width: 210px;
        margin-right: 10px;
      }
      .day-form-in {
        // width: 220px;
      }
      .day-form-btn {
        margin-right: 10px;

      }
    }
  }
</style>
<script>
  import { page,rangePage,list } from '@/api/clock'
  import {
    tree,
  } from '@/api/tree'
  import moment from 'moment';
  export default {
    data() {
      return {
        columns: [],
        list: [],
        currentIndex: 1,
        columnsMap: new Map([
          [1, [
            {
              title: '教师姓名',
              dataIndex: 'userName',
            },
            {
              title: '部门',
              dataIndex: 'deptName',
            },
            {
              title: '考勤组',
              dataIndex: 'groupName',
            },
            {
              title: '在校时长',
              dataIndex: 'workMinute',
            },
            {
              title: '上班（一次）',
              dataIndex: 'work_s_1',
              scopedSlots: { customRender: 'work_s_1' },
            },
            {
              title: '下班（一次）',
              dataIndex: 'work_x_1',
              scopedSlots: { customRender: 'work_x_1' },
            },
            {
              title: '上班（两次）',
              dataIndex: 'work_s_2',
              scopedSlots: { customRender: 'work_s_2' },
            },
            {
              title: '下班（两次）',
              dataIndex: 'work_x_2',
              scopedSlots: { customRender: 'work_x_2' },
            },
            {
              title: '上班（三次）',
              dataIndex: 'work_s_3',
              scopedSlots: { customRender: 'work_s_3' },
            },
            {
              title: '下班（三次）',
              dataIndex: 'work_x_3',
              scopedSlots: { customRender: 'work_x_3' },
            },
          ]],
          [2, [
            {
              title: '教师姓名',
              dataIndex: 'userName',
            },
            {
              title: '部门',
              dataIndex: 'deptName',
            },
            {
              title: '考勤组',
              dataIndex: 'groupName',
            },
            {
              title: '上班天数',
              dataIndex: 'workTimes',
              customCell: (record,rowIndex) => {
                return {
                  style: {
                    'color': '#4174FD'
                  }
                }
              }
            },
            {
              title: '请假天数',
              dataIndex: 'leaveTimes',
              customCell: (record,rowIndex) => {
                return {
                  style: {
                    'color': '#4174FD'
                  }
                }
              }
            },
            {
              title: '缺卡次数',
              dataIndex: 'workMiss',
              customCell: (record,rowIndex) => {
                return {
                  style: {
                    'color': '#4174FD'
                  }
                }
              }
            },
            {
              title: '迟到次数',
              dataIndex: 'workLate',
              customCell: (record,rowIndex) => {
                return {
                  style: {
                    'color': '#4174FD'
                  }
                }
              }
            },
            {
              title: '早退次数',
              dataIndex: 'workLeaveEarly',
              customCell: (record,rowIndex) => {
                return {
                  style: {
                    'color': '#4174FD'
                  }
                }
              }
            }
          ]],
          [3, [
            {
              title: '教师姓名',
              dataIndex: 'userName',
            },
            {
              title: '部门',
              dataIndex: 'deptName',
            },
            {
              title: '考勤组',
              dataIndex: 'groupName',
            },
            {
              title: '上班天数',
              dataIndex: 'workTimes',
              customCell: (record,rowIndex) => {
                return {
                  style: {
                    'color': '#4174FD'
                  }
                }
              }
            },
            {
              title: '请假天数',
              dataIndex: 'leaveTimes',
              customCell: (record,rowIndex) => {
                return {
                  style: {
                    'color': '#4174FD'
                  }
                }
              }
            },
            {
              title: '缺卡次数',
              dataIndex: 'workMiss',
              customCell: (record,rowIndex) => {
                return {
                  style: {
                    'color': '#4174FD'
                  }
                }
              }
            },
            {
              title: '迟到次数',
              dataIndex: 'workLate',
              customCell: (record,rowIndex) => {
                return {
                  style: {
                    'color': '#4174FD'
                  }
                }
              }
            },
            {
              title: '早退次数',
              dataIndex: 'workLeaveEarly',
              customCell: (record,rowIndex) => {
                return {
                  style: {
                    'color': '#4174FD'
                  }
                }
              }
            }
          ]]
        ]),
        // 考勤组
        groupArr: [],
        // 部门
        deptArr: [],
        // 考勤状态
        timesTypeArr: [
          {
            title: '请选择',
            value: ''
          },
          {
            title: '迟到',
            value: '1'
          },
          {
            title: '早退',
            value: '2'
          },
          {
            title: '旷工',
            value: '3'
          },
          {
            title: '请假',
            value: '4'
          },
          {
            title: '外勤',
            value: '5'
          },
          {
            title: '缺卡',
            value: '6'
          },
        ],

        searchData: {
          // userName: '',
          // dailyType: '',       // 1：上班天数的，2：请假天数的，必填，查询周（月）统计的每天数据时该条件生效
          // groupId: '',
          // timesType: '',    // 1：迟到，2：早退，3：旷工，4：请假，5：外勤，6：缺卡，必填，查询周（月）统计的每次数据时该条件生效
          // userId: '',       // 老师ID
          // deptId: [],

          queryDate: moment().startOf('days').format('YYYY-MM-DD'),
          queryStartDate: '', // 默认周
          queryEndDate: ''      // 默认月
        }
      }
    },
    created() {
      list()
      .then(response => {
        response.data.unshift({
          groupName: '请选择',
          id: ''
        })
        this.groupArr = response.data
      })
      tree({ parentId: 0}).then(response => {
        this.deptArr = response.data.list
      })
      this.columns = this.columnsMap.get(1)
      this.getList()
    },
    methods: {
      getTxtColor (txt = '') {
        if (txt.includes('迟到') || txt.includes('早退') || txt.includes('缺卡') || txt.includes('旷')) {
          return 'red'
        }
        if (txt.includes('请假') || txt.includes('外勤') || txt.includes('未打卡') || txt.includes('忘')) {
          return 'yellow'
        }
      },

      // 时间的条件
      setTimeCondition (index) {

        this.currentIndex = index = parseInt(index)
        if (index == 1) {
          this.searchData.queryDate = moment().startOf('days').format('YYYY-MM-DD')
          this.searchData.queryStartDate = ''
          this.searchData.queryEndDate = ''
        }
        if (index == 2) {
          this.searchData.queryDate = ''
          this.searchData.queryStartDate = moment().startOf('weeks').format('YYYY-MM-DD')
          this.searchData.queryEndDate = moment().endOf('weeks').format('YYYY-MM-DD')
        }
        if (index == 3) {
          this.searchData.queryDate = ''
          this.searchData.queryStartDate = moment().startOf('months').format('YYYY-MM-DD'),
          this.searchData.queryEndDate = moment().endOf('months').format('YYYY-MM-DD')
        }
        this.columns = this.columnsMap.get(index)

        this.getList()
      },
      getList() {
        if(this.searchData.queryDate) {
          this.searchData.queryDate = moment(this.searchData.queryDate).format('YYYY-MM-DD')
        }
        if (this.currentIndex == 1) {
          page(this.searchData)
          .then(response => {
            let list = response.data.records
            let tempArr = []
            list.forEach(item => {
              item.work_s_1 = item.punchShiftDTOList[0] ? (item.punchShiftDTOList[0].workStartPunch || '未打卡') :  '未设置'
              item.work_x_1 = item.punchShiftDTOList[0] ? (item.punchShiftDTOList[0].workEndPunch || '未打卡') :  '未设置'
              item.work_s_2 = item.punchShiftDTOList[1] ? (item.punchShiftDTOList[1].workStartPunch || '未打卡') :  '未设置'
              item.work_x_2 = item.punchShiftDTOList[1] ? (item.punchShiftDTOList[1].workEndPunch || '未打卡') :  '未设置'
              item.work_s_3 = item.punchShiftDTOList[2] ? (item.punchShiftDTOList[2].workStartPunch || '未打卡') :  '未设置'
              item.work_x_3 = item.punchShiftDTOList[2] ? (item.punchShiftDTOList[2].workEndPunch || '未打卡') :  '未设置'
              tempArr.push(item)
            })
            this.list = tempArr
          })
        }
        if (this.currentIndex == 2) {
          rangePage(this.searchData)
          .then(response => {
            this.list = response.data.records
          })
        }
        if (this.currentIndex == 3) {
          rangePage(this.searchData)
          .then(response => {
            this.list = response.data.records
          })
        }
      },

      reset() {

      }
    }
  }
</script>
